<template>
  <a-card size="small">
    <a-row :gutter="3">
      <a-col :span="8">
        <a-row :gutter="3">
          <a-col :span="8">
            <a-card hoverable style="background: rgb(255, 157, 77)">
              <a-statistic title="今日成功下款" :value="reportEntity.todayA">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: rgb(255, 157, 77)">
              <a-statistic title="本周成功下款" :value="reportEntity.thisWeekA">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: rgb(255, 157, 77)">
              <a-statistic
                title="本月成功下款"
                :value="reportEntity.thisMonthA"
              >
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="8">
        <a-row :gutter="3">
          <a-col :span="8">
            <a-card hoverable style="background: #dec674">
              <a-statistic title="今日新增客户" :value="reportEntity.todayB">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: #dec674">
              <a-statistic title="本周新增客户" :value="reportEntity.thisWeekB">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: #dec674">
              <a-statistic
                title="本月新增客户"
                :value="reportEntity.thisMonthB"
              >
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="8">
        <a-row :gutter="3">
          <a-col :span="8">
            <a-card hoverable style="background: #afb4db">
              <a-statistic title="今日新增进件" :value="reportEntity.todayC">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: #afb4db">
              <a-statistic title="本周新增进件" :value="reportEntity.thisWeekC">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: #afb4db">
              <a-statistic
                title="本月新增进件"
                :value="reportEntity.thisMonthC"
              >
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-row :gutter="3" class="el-top">
      <a-col :span="8">
        <a-row :gutter="3">
          <a-col :span="8">
            <a-card hoverable style="background: #a3cf62">
              <a-statistic title="今日新增签约" :value="reportEntity.todayD">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: #a3cf62">
              <a-statistic title="本周新增签约" :value="reportEntity.thisWeekD">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: #a3cf62">
              <a-statistic
                title="本月新增签约"
                :value="reportEntity.thisMonthD"
              >
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="8">
        <a-row :gutter="3">
          <a-col :span="8">
            <a-card hoverable style="background: #fedcbd">
              <a-statistic title="今日手动添加" :value="reportEntity.todayE">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: #fedcbd">
              <a-statistic title="本周手动添加" :value="reportEntity.thisWeekE">
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable style="background: #fedcbd">
              <a-statistic
                title="本月手动添加"
                :value="reportEntity.thisMonthE"
              >
              </a-statistic>
            </a-card>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="8">
        <a-row :gutter="3">
          <a-col :span="12">
            <a-card hoverable style="background: #afdfe4">
              <a-statistic
                title="上次登录IP"
                :value="lastLoginIp"
                :value-style="{ color: '#472d56' }"
              >
              </a-statistic>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card hoverable style="background: #afdfe4">
              <a-statistic
                title="上次登录时间"
                :value="lastLoginTime"
                :value-style="{ color: '#472d56' }"
                formatter="yyyy-HH-dd HH:mm"
              />
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!--第三行 图表-->
    <a-collapse activeKey="1" class="el-top">
      <a-collapse-panel key="1" header="订单统计" :show-arrow="false">
        <a-form-model
          :model="params"
          ref="paramsForm"
          :labelCol="{ md: { span: 6 }, xs: { span: 24 }, sm: { span: 12 } }"
          :wrapperCol="{ md: { span: 18 }, xs: { span: 24 }, sm: { span: 12 } }"
        >
          <a-row>
            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
              <a-form-model-item label="现居城市">
                <a-select
                  allowClear
                  v-model.trim="params.city"
                  placeholder="请选择现居城市"
                  style="width: 100%"
                  @change="loadCharts"
                >
                  <a-select-option
                    v-for="item in citys"
                    :key="item.id"
                    :value="item.name"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>

            <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" :xxl="6">
              <a-form-model-item label="申请时间">
                <a-range-picker
                  v-model.trim="params.orderTime"
                  style="width: 100%"
                  @change="loadCharts"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <div style="height: 300px; width: 90%" ref="ee1" id="ee1"></div>
      </a-collapse-panel>
    </a-collapse>
  </a-card>
</template>
<script>
import moment from "moment";
import { queryHomeReport, queryHomeTotalReport } from "./home";
import { queryDicSelect } from "@/views/sysModule/system/dic";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      reportEntity: {
        thisMonthA: 0,
        thisMonthB: 0,
        thisMonthC: 0,
        thisMonthD: 0,
        thisMonthE: 0,
        thisWeekA: 0,
        thisWeekB: 0,
        thisWeekC: 0,
        thisWeekD: 0,
        thisWeekE: 0,
        todayA: 0,
        todayB: 0,
        todayC: 0,
        todayD: 0,
        todayE: 0,
      },
      lastLoginIp: "",
      lastLoginTime: "",
      citys: [],
      params: {
        city: "",
        orderTime: "",
      },
    };
  },
  mounted() {
    this.lastLoginIp = this.$store.state.user.lastLoginIp;
    this.lastLoginTime = this.$store.state.user.lastLoginTime;
    if (this.lastLoginTime) {
      this.lastLoginTime = moment(this.lastLoginTime).format("MM-DD HH:mm");
    }

    this.loadReport();
    queryDicSelect({ dicTypeUniqueCode: "City" }).then((res) => {
      this.citys = res.data;
    });
    this.loadCharts();
  },
  methods: {
    loadReport() {
      queryHomeTotalReport().then((res) => {
        this.reportEntity = res.data;
      });
    },
    loadCharts() {
      let option = {
        tooltip: {},
        xAxis: {
          data: [
            "未接通",
            "电话挂断",
            "无意向",
            "已预约",
            "已上门",
            "签约",
            "银行进件",
            "放款成功",
            "放款失败",
          ],
        },
        yAxis: {},
        series: [
          {
            name: "次数",
            type: "bar",
            data: [0, 0, 0, 0, 0, 0, 0],
          },
        ],
      };
      var eel = document.getElementById("ee1");
      let myChart = this.$echarts.init(eel);
      var queryParams = {
        city: this.params.city,
        startTime: "",
        endTime: "",
      };
      if (this.params.orderTime) {
        queryParams.startTime = this.params.orderTime[0]._d;
        queryParams.endTime = this.params.orderTime[1]._d;
      }
      queryHomeReport(queryParams).then((res) => {
        option.series[0].data = res.data;
        myChart.setOption(option);
      });
    },
    onFinish() {
      console.log("finished!");
    },
  },
};
</script>
<style scoped>
.el-top {
  margin-top: 10px;
}
</style>